<template>
	<view class="g-mask" :class="[CPU_display]" @click.self="clickMaskWrap" :style="{'display':display}">
		<slot name="content"></slot>
	</view>
</template>

<script>
	/*
	 * prop {Boolean} visible是否显示mask，必须携带.sync修饰符
	 * prop {Boolean} blur  背景是否加上模糊效果 
	 * prop {Boolean} animation 背景是否打开动画效果
	 * slot {name:content} mask中的内容
	 * @Event {Function} handleClick 点击mask事件
	 *  Event {Function} handleClick 点击mask事件
	 */
	export default{
		name:'g-mask',
		data(){
			return{
				display:'none',
			}
		},
		props:{
			blur:{
				type:Boolean,
				default:false
			},
			visible:{
				type:Boolean,
				default:true
			},
			animation:{
				type:Boolean,
				default:false
			},
		},
		methods:{
			clickMaskWrap(){
				this.$emit("update:visible",false)
				this.$emit('handleClick')
			}
		},
		computed:{
			CPU_display(){
				let displayClass
				if(!this.blur){
					displayClass= this.visible?`g-mask-opcity-show`:`g-mask-opcity-hide`
				}else if(this.blur){
					displayClass= this.visible?`g-mask-blur-show`:`g-mask-blur-hide`
				}
				if(this.animation){
					displayClass+='-ani'
				}
				return displayClass
			},
		},
		watch:{
			visible(){
				if(this.visible==false){
					setTimeout(()=>{
						this.display='none'
					},500)
				}else{
					this.display='flex'
				}
			},
		},
		created() {
		}
	}
</script>
<style lang="scss" scoped>
	.g-mask{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		@keyframes op_show{
			0%{
				opacity: 0;
			}
			50%{
				opacity: 0.7;
			}
			100%{
				opacity: 1;
			}
		}
		@keyframes op_hide{
			0%{
				opacity: 1;
			}
			50%{
				opacity: 0.5;
			}
			100%{
				opacity: 0;
			}
		}
		&-opcity{
			&-show{
				animation: op_show 0.25s linear forwards;
				background: rgba($color: #2b2b2b, $alpha: 0.5);
			}
			&-hide{
				background: rgba($color: #2b2b2b, $alpha: 0.5);
				animation: op_hide 0.25s linear forwards;
			}
		}
		&-blur{
			&-show{
				background: rgba($color: #2b2b2b, $alpha: 0.5);
				backdrop-filter: blur(20rpx);
				animation: op_show 0.3s linear forwards;
			}
			&-hide{
				background: rgba($color: #2b2b2b, $alpha: 0.5);
				animation: op_hide 0.3s linear forwards;
			}
		}
		@keyframes show{
			0%{
				transform: scale(1);
				background: rgba($color: #2b2b2b, $alpha: 0);
			}
			40%{
				transform: scale(1.2);
				background: rgba($color: #2b2b2b, $alpha: 0.5);
			}
			100%{
				transform: scale(1);
				background: rgba($color: #2b2b2b, $alpha: 0.5);
			}
		}
		@keyframes hide{
			0%{
				transform: scale(1);
				background: rgba($color: #2b2b2b, $alpha: 0.5);
			}
			10%{
				transform: scale(1);
				background: rgba($color: #2b2b2b, $alpha: 0);
			}
			30%{
				transform: scale(1.3);
				background: rgba($color: #2b2b2b, $alpha: 0);
			}
			50%{
				transform: scale(1.3);
				background: rgba($color: #2b2b2b, $alpha: 0);
			}
			100%{
				transform: scale(0);
				background: rgba($color: #2b2b2b, $alpha: 0);
			}
		}
		
		&-opcity{
			&-show-ani{
				animation: show 0.4s linear forwards;
			}
			&-hide-ani{
				animation: hide 0.5s linear forwards;
			}
		}
		&-blur{
			&-show-ani{
				backdrop-filter: blur(20rpx);
				animation: show 0.4s linear forwards;
			}
			&-hide-ani{
				animation: hide 0.5s linear forwards;
			}
		}
	}
</style>
